<template>
  <div>
    <div>
      <van-nav-bar
        title="注册"
        left-text=""
        left-arrow
        @click-left="onClickLeft"
      />
    </div>
    <div>
      <van-form @submit="onSubmit">
        <van-field
          v-model="username"
          name="tel"
          label="用户名"
          placeholder="用户名"
          :rules="[{ required: true, message: '请填写用户名' }]"
          @blur="inputblur()"
        />
        <van-field
          v-model="password"
          type="password"
          name="password"
          label="密码"
          placeholder="密码"
          :rules="[{ required: true, message: '请填写密码' }]"
        />
        <van-field
          v-model="demotext"
          type="text"
          name="验证码"
          label="验证码"
          placeholder="请输入验证码"
          :rules="[{ required: true, message: '请填写验证码' }]"
          @blur="yanzheng()"
        />
        <van-button type="info" @click="funb()" :disabled="bool">{{
          bentext
        }}</van-button>
        <div style="margin: 16px">
          <van-button round block type="info" native-type="submit"
            >注册</van-button
          >
        </div>
      </van-form>
    </div>
  </div>
</template>

<script>
import { Toast } from "vant";
import service from "../../../utils/service";
import { Notify } from "vant";
import { Dialog } from "vant";

export default {
  data() {
    return {
      bentext: "获取验证码",
      bool: false,
      username: "",
      password: "",
      demotext: "",
    };
  },
  methods: {
    onClickLeft() {
      this.$router.push("/home");
    },
    onSubmit(values) {
      console.log("submit", values);
      service({
        url: "http://118.178.238.19:3001/api/user/dofinishregister",
        method: "post",
        data: {
          tel: values.tel,
          password: values.password,
        },
      }).then((res) => {
        console.log("注册", res);
        if (res.data.code == 200) {
          Dialog.alert({
            title: "注册",
            message: "注册成功",
          }).then(() => {
            // on close
            this.$router.push("/denglu");
          });
        }
      });
    },

    //判断用户账号是否注册
    inputblur() {
      console.log(this.username);
      service({
        url: "http://118.178.238.19:3001/api/user/docheckphone",
        method: "post",
        data: {
          tel: this.username,
        },
      }).then((res) => {
        console.log(res.data.code);
        if (res.data.code == 200) {
          Notify({ type: "success", message: "您该账户可以使用" });
        } else {
          Notify({ type: "danger", message: "用户名已被注册" });
        }
      });
    },
    //发送验证码
    funb() {
      let i = 5;
      this.bool = true;

      service({
        url: "http://118.178.238.19:3001/api/user/dosendmsgcode",
        method: "post",
        data: {
          tel: this.username,
        },
      }).then((res) => {
        console.log("短信验证接口", res);
      });

      let setint = setInterval(() => {
        this.bentext = "验证码已发" + i + "秒";
        i--;
        if (i == 0) {
          this.bentext = "点我发送验证码";
          clearInterval(setint);
          this.bool = false;
        }
      }, 1000);
    },

    //验证验证码是否正确
    yanzheng() {
      service({
        url: "http://118.178.238.19:3001/api/user/docheckcode",
        method: "post",
        data: {
          tel: this.username,
          telcode: this.demotext,
        },
      }).then((res) => {
        console.log(res.data);
      });
    },
  },
};
</script>

<style>
</style>